/*
 * @Description: 处理扣款失败行程的支付弹窗
 * @Author: yingying.fan
 * @Date: 2019-03-15 15:42:07
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-10 15:57:27
 */
<template>
  <mask-module
    ref="mask"
    :isClickBgToHide="false"
  >
    <div class="content">
      <PayPage1
        class="page1"
        @touchmove.self.stop.prevent
        @goNext="goToNext"
        @clickLeft="closeDialog"
        @goPay="goToPayBill"
        :payType="choosePayType"
        :amount="amount"
      />
      <PayPage2
        class="page2"
        :class="page2Class"
        @touchmove.self.stop.prevent
        @choose="chooseType"
        @clickLeft="back"
        :value="chooseIndex"
        :payList="payList"
      />
    </div>
  </mask-module>
</template>

<script>
// import MaskModule from '@/components/mask/MaskModule'
import { MaskModule } from 'vue-xb-ui-depot'
import PayPage1 from './PayPage1'
import PayPage2 from './PayPage2'
import * as PayTypeItme from '../../contants/PayType.js'
import { open } from '@/utils/JumpUtils.js'
import {
  getPayTypeList,
  payFailPosBill,
  payFailPosBillCallback
} from '../../api/api.js'
export default {
  components: {
    'mask-module': MaskModule,
    PayPage1,
    PayPage2
  },
  data() {
    return {
      page2Class: '', // 第二步小页面的样式，主要处理动画效果
      chooseIndex: 0, // 当前选中的支付方式的编号
      payList: null // 当前支付方式列表
    }
  },
  props: {
    amount: {
      type: String,
      default: ''
    },
    tradeNoList: {
      type: Array,
      default: () => {
        return []
      }
    },
    goToUrl: {
      type: String,
      default: ''
    }
  },
  computed: {
    mask() {
      return this.$refs.mask
    },
    // 当前选中的支付方式整个数据对象
    choosePayType() {
      if (this.payList) {
        return this.payList[this.chooseIndex]
      } else {
        return {}
      }
    }
  },
  mounted() {
    // 返回刷新支付列表
    window.onResume = () => {
      this.getPayList()
    }
  },
  methods: {
    show() {
      this.$refs.mask.show()
    },
    hide() {
      this.$refs.mask.hide()
    },
    // 获取支付列表
    getPayList() {
      getPayTypeList(this.amount).then(body => {
        this.payList = body.PAY_LIST
      }).catch(() => {

      })
    },
    // 选择模块选择了支付方式后的操作
    chooseType(payMap, index) {
      if (payMap.type !== 0) {
        this.back()
        this.chooseIndex = index
      } else { // 添加银行卡跳转绑卡页面
        open('bindcard.html?_tv=fase&_knbw=true')
      }
    },
    // 第一个页面点击关闭按钮
    closeDialog() {
      this.page2Class = ''
      this.mask.hide()
    },
    goToNext() {
      this.page2Class = 'gonext'
    },
    back() {
      this.page2Class = ''
    },
    goToPayBill(payType, amount) {
      payFailPosBill({
        PAYMENT: payType.payment,
        PAY_ACCOUNT: payType.payAccount,
        LIST: this.tradeNoList,
        AMOUNT: amount
      }).then(body => {
        console.log('支付成功')
        switch (payType.type) {
          case PayTypeItme.UNIONPAY_CARD: // 银联卡
          case PayTypeItme.WALLET: // 钱包余额
            payFailPosBillCallback(amount, body.UNIFY_PAY_NO, this.goToUrl)
            break
          case PayTypeItme.ALIPAY: // 支付宝
            // 支付宝拉起支付
            this.$doPayment('ALIPAY', body.PAYMENT_STR, () => {
              console.log('支付宝支付成功')
              payFailPosBillCallback(amount, body.UNIFY_PAY_NO, this.goToUrl)
            }, () => {
              console.log('支付宝支付失败')
              payFailPosBillCallback(amount, body.UNIFY_PAY_NO, this.goToUrl)
            })
            break
        }
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
.mask-module-wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 750px;
  height: 880px;
  overflow-x: hidden;
}
.page1,
.page2 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.page1 {
  left: 0;
  z-index: 12;
}
.page2 {
  left: 750px;
  z-index: 13;
  transition: left 0.3s;
  -webkit-transition: left 0.3s; /* Safari and Chrome */
}
/* 下一页的动画效果 */
.gonext {
  left: 0;
}
/* 返回的动画效果 */
/* .back {
  left: 750px;
  animation: backani 5s;
  -webkit-animation: backani 0.5s;
}
@keyframes backani {
  0% {
    left: 0;
  }
  100% {
    left: 750px;
  }
}
@-webkit-keyframes backani {
  0% {
    left: 0;
  }
  100% {
    left: 750px;
  }
} */
</style>
